import React, { Component } from 'react'
import Dimensions from 'react-dimensions'
import ReactDOM from 'react-dom';
import { Modal, Form,Icon,Select,Input,Button ,Cascader,Row, Col,message,Tooltip} from 'antd';
import { ModalForm } from '../../../components'
import { fetchData } from '../../../components/AjaxConsumer'
import store from '../../../stores'
import ModalTable from './modalTable'

const confirm = Modal.confirm;
const Option = Select.Option;
const FormItem = Form.Item;
const WrappedAdvancedSearchForm = Form.create()(ModalForm);

class UpdateLocationPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            visible: false,
            resData: null,
            submitUrl:'/base/data/Location/c',
            formData: {}
        };
        //和stroes进行通信挂钩 并绑定解绑事件unsubscribe
        this.unsubscribe = store.listen((storeResData)=>{
            this.setState({
                storeResData: storeResData
            })
        })

        this.formAlerSize = 'large'; //弹出框的大小 只有'large'和'small'两种值 （必须,输错时默认为large）
        //noinspection JSAnnotator
        this.getFormData = [
            {
                type : 'hiddenInput',
                showName : 'dockId',
                name : 'dockId',
                initialValue : ''
            },
            {
                type : 'input',
                showName : '库位编码',
                name : 'locationCode',
                initialValue : '',
                required:'required'  //选填
            },{
                type : 'input',
                showName : '仓库编码',
                name : 'warehouseCode',
                initialValue : '',
                required:'required'
            },{
                type : 'select',
                showName : '区域',
                name : 'regionCode',
                optionList:[              //必填  下拉框的信息
                ],
                initialValue : '',
                required:'required'
            },{
                type : 'input',
                showName : '库区编码',
                name : 'areaCode',
                initialValue : '',
                required:'required'
            },{
                type : 'input',
                showName : '工作区',
                name : 'workArea',
                initialValue : '',
                required:'required'
            },{
                type : 'input',
                showName : '上架顺序',
                name : 'shelfOrder',
                initialValue : '',
                required:'required'
            },{
                type : 'input',
                showName : '拣货顺序',
                name : 'pickOrder',
                initialValue : '',
                required:'required'
            },{
                type : 'input',
                showName : '盘点顺序',
                name : 'checkOrder',
                initialValue : '',
                required:'required'
            },{
                type : 'input',
                showName : '库位使用',
                name : 'locationUse',
                initialValue : '',
                required:'required'
            },{
                type : 'select',
                showName : '是否允许拣货',
                name : 'pickFlag',
                initialValue : '',
                required:'required',
                optionList:[
                    {
                        optionKey:'',
                        optionShow:''
                    },{
                        optionKey:'0',
                        optionShow:'否'
                    },{
                        optionKey:'1',
                        optionShow:'是'
                    }
                ]
            },{
                type : 'input',
                showName : '库位类型',
                name : 'locationType',
                initialValue : '',
                required:'required'
            },{
                type : 'input',
                showName : '库位属性',
                name : 'locationAttr',
                initialValue : '',
                required:'required'
            },{
                type : 'input',
                showName : '库存环境',
                name : 'stockEnv',
                initialValue : '',
                required:'required'
            },{
                type : 'input',
                showName : '校验码',
                name : 'checkCode',
                initialValue : '',
                required:'required'
            },{
                type : 'input',
                showName : '允许混放产品',
                name : 'productMix',
                initialValue : '',
                required:'required'
            },{
                type : 'input',
                showName : '允许混放批次',
                name : 'batchMix',
                initialValue : '',
                required:'required'
            },{
                type : 'input',
                showName : '体积限制',
                name : 'volumeLimit',
                initialValue : '',
                required:'required'
            },{
                type : 'input',
                showName : '重量限制',
                name : 'weightLimit',
                initialValue : '',
                required:'required'
            },{
                type : 'input',
                showName : '箱数限制',
                name : 'boxLimit',
                initialValue : '',
                required:'required'
            },{
                type : 'input',
                showName : '数量限制',
                name : 'qtyLimit',
                initialValue : '',
                required:'required'
            },{
                type : 'input',
                showName : '托盘限制',
                name : 'palletLimit',
                initialValue : '',
                required:'required'
            },{
                type : 'input',
                showName : '长度',
                name : 'length',
                initialValue : '',
                required:'required'
            },{
                type : 'input',
                showName : '宽度',
                name : 'width',
                initialValue : '',
                required:'required'
            },{
                type : 'input',
                showName : '高度',
                name : 'height',
                initialValue : '',
                required:'required'
            },{
                type : 'input',
                showName : 'X坐标',
                name : 'xcoordinate',
                initialValue : '',
                required:'required'
            },{
                type : 'input',
                showName : 'Y坐标',
                name : 'ycoordinate',
                initialValue : '',
                required:'required'
            },{
                type : 'input',
                showName : 'Z坐标',
                name : 'zcoordinate',
                initialValue : '',
                required:'required'
            },{
                type : 'input',
                showName : 'X像素',
                name : 'xpixels',
                initialValue : '',
                required:'required'
            },{
                type : 'input',
                showName : 'Y像素',
                name : 'ypixels',
                initialValue : '',
                required:'required'
            },{
                type : 'input',
                showName : 'Z像素',
                name : 'zpixels',
                initialValue : '',
                required:'required'
            },{
                type : 'input',
                showName : '排',
                name : 'locRow',
                initialValue : '',
                required:'required'
            },{
                type : 'input',
                showName : '层数',
                name : 'layerNum',
                initialValue : '',
                required:'required'
            },{
                type : 'input',
                showName : '列',
                name : 'locColumn',
                initialValue : '',
                required:'required'
            },{
                type : 'input',
                showName : '巷道',
                name : 'bord',
                initialValue : '',
                required:'required'
            }
        ];
    }

    // <Icon type="search" style={{cursor:'pointer'}} onClick={this.hanleIconSearchClick} />
    //组件销毁时解绑与stores的监听
    componentWillUnmount(){
        this.unsubscribe();
    }

    hanleIconSearchClick = () => {
        this.refs.modalTable.showModal();
    }


    //显示弹框
    showModal = () => {
        this.setState({
            visible: true,
        });
    }
    // 隐藏弹出框
    hideModal = () => {
        this.setState({
            visible: false,
        });
    }
    // 新增库区
    addLocationHandle = () => {
        this.setState({
            submitUrl:'/base/data/location/c',
            formTitle: '新增库区',
            resData: null
        });
        this.showModal();//显示弹框
    }

    // 新增库区
    addInitLocationHandle = () => {
        this.setState({resData: null});
        //根据对象的Id 属性获取对象信息
        const options= {
            url: '/base/region/all/',
            type: 'get',//请求方式
            condition:{}
        };
        fetchData(this, options, this.addLocationHandle);
    }

    editGetInfoCallBack = (resData) =>{
        this.setState({
            submitUrl:'/base/data/location/u',
            resData: resData
        });
        this.showModal();//显示弹框
    }

    // 编辑信息
    editHandle = (rowObj) => {
        this.setState({resData: null});
        //根据对象的Id 属性获取对象信息
        let locationId = rowObj.locationId;
        const options= {
            url: '/base/data/location/r/'+locationId,
            type: 'get',//请求方式
            condition:{}
        };
        fetchData(this, options, this.editGetInfoCallBack);
    }


    // 删除后的回调
    deleteCallBackHandle = ()=>{
        let result = this.state.resData;
        if (result.code == '0'){
            alert(result.msg);
        }else {
            this.refreshHandle();
        }
    }

    // 删除用户
    deleteHandle = (rowObj) => {
        let locationId = rowObj.locationId;

        const options= {
            url: '/base/data/location/d',
            condition:{locationId:locationId}
            /*contentType:'application/x-www-form-urlencoded'*/
        };
        let _that = this;
        confirm({
            title: '您确定要删除吗？',
            onOk() {
                fetchData(_that, options, (resData) => {
                    _that.setState({
                        resData: resData
                    });
                    if (resData.code == '0'){
                        alert(resData.msg);
                    }else {
                        _that.refreshHandle();
                    }
                });
            },
            onCancel() {
                console.log("取消了删除操作")
            },
        });
    }


    // 新增/修改后的回调
    handleOk = () => {
        // let result = this.state.resData;
        this.hideModal();
        this.refreshHandle();
    }

    handleCancel = () => {
        this.refs.modalTable.showModal();
        //this.hideModal();
    }

    //刷新List列表
    refreshHandle = () => {
        console.log("刷新List列表")
        this.props.refreshHandle();
    }

    componentDidMount() {
        const options= {
            url: '/base/region/all',
            type: 'get',
            condition:{}
        };
        fetchData(this, options, this.dicInitCallBackHandle);
    }

    //下拉框 初始化
    dicInitCallBackHandle = (resData)=>{
        //alert('resData' + JSON.stringify(resData, null, 3));
        let optionList = [];
        resData.data.map( (e,index) => {
            let tmp = {};
            tmp.optionKey = e.regionCode;
            tmp.optionShow = e.regionDesc;
            optionList.push(tmp);
        });

        this.getFormData[3].optionList = optionList;
    }
    componentWillRecieveProps(nextProps){
        this.setState({
            formData: nextProps.formData
        })
    }
    componentWillmount(){
        this.setState({
            formData: this.props.formData
        })
    }


    render() {

        const {getFieldDecorator} = this.props.form;
        const formItemLayout = {
            labelCol: {
                xs: {span: 24},
                sm: {span: 6}
            },
            wrapperCol: {
                xs: {span: 24},
                sm: {span: 14}
            }
        };
        const tailFormItemLayout = {
            wrapperCol: {
                xs: {span: 24,offset: 0},
                sm: {span: 24,offset: 10}
            }
        };
        //一行几个 （总宽度24,）
        const colNumber = 12;//一行2个

        if(this.state.resData != null &&  this.state.resData.data != null){
            let dock = this.state.resData.data;
            this.getFormData.map( (e, index) => {
                e.initialValue = dock[e.name]
            });
        } else {
            this.getFormData.map( (e, index) => {
                if(e.type == 'select'){
                    e.initialValue = '1'
                } else if (e.type == 'datapacker') {
                    e.initialValue = ''
                }
            });
        }

        return(
            <Modal
                style={{top:'20px'}}
                visible={this.state.visible}
                title={this.state.formTitle ? this.state.formTitle : '填写表单'}
                onOk={this.handleOk}
                onCancel={this.handleCancel}
                width={this.formAlerSize=='large'?'850px':'400px'}
                footer=''
            >
                <Form
                    onSubmit={this.handleSubmit}
                    style={{
                        backgroundColor: '#fff',
                        paddingTop: '20px',
                        paddingBottom: '20px'
                    }}>
                    <Row>
                        <Col span={colNumber}>
                            <FormItem {...formItemLayout} label="E-mail" hasFeedback>

                            </FormItem>
                        </Col>


                        <Col span={colNumber}>
                            <FormItem
                                {...formItemLayout}
                                label="弹出列表"
                            >
                                <Row gutter={8}>
                                    <Col span={22}>

                                    </Col>
                                    <Col span={2}>
                                        <Icon type="search" style={{cursor:'pointer'}} onClick={this.hanleIconSearchClick} />
                                    </Col>
                                </Row>
                            </FormItem>
                        </Col>
                        <Col span={24}>
                            <FormItem {...tailFormItemLayout}>
                                <Button type="primary" htmlType="submit" size="large">{this.state.loading?'提交中...':'确定'}</Button>
                                <Button
                                    type="default"
                                    style={{marginLeft: '50px'}}
                                    size="large"
                                    onClick={this.resetFrom}
                                >
                                    取消
                                </Button>
                            </FormItem>
                        </Col>

                    </Row>
                </Form>
                <WrappedAdvancedSearchForm
                    ref="modalFrom"
                    title="库区信息"
                    formAlerSize={this.formAlerSize}
                    formUrl={this.state.submitUrl}
                    getFormData={this.getFormData}
                    closeBox={this.handleCancel}
                    checkBox={this.handleOk} />
                <ModalTable getTableData={this.getTableData} ref='modalTable' />
            </Modal>

        )
    }
}
export default Form.create()(UpdateLocationPage);